<template>
  <div class="function-config">
    <el-dialog
      :visible.sync="isShow"
      @close="triggerClose"
      :close-on-click-modal="false"
      @opened="triggerOpen"
      width="60%"
    >
      <el-form
        :model="purchaseContractItem"
        label-position="right"
        label-width="150px"
        class="page-edit-colllapse-form"
        :rules="rules"
        ref="purchaseContractItem">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('pur.contract_item_project')" prop="project">
              <el-input v-model="purchaseContractItem.project" :disabled="true">
                <el-button slot="append" icon="el-icon-search" @click="showProject"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('pur.contract_item_num')" prop="num">
              <el-input v-model.number="purchaseContractItem.num"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('pur.serial_number')" prop="serialNumber">
              <el-input v-model="purchaseContractItem.serialNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('pur.contract_arrival_time')">
              <el-date-picker
                style="width:100%"
                v-model="purchaseContractItem.requiredArrivalTime"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('pur.service_name')">
              <el-input v-model="purchaseContractItem.serviceName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('pur.specification')">
              <el-input v-model="purchaseContractItem.specification"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          
          <el-col :span="12">
            <el-form-item :label="$t('pur.contract_item_unit')">
              <el-input v-model="purchaseContractItem.unit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('pur.plannedCompletionTime')">
              <el-date-picker
                v-model="purchaseContractItem.plannedCompletionTime"
                type="date"
                style="width:100%"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="'是否为科研立项'" prop="scientificresearchproject">
              <el-select
                style="width:100%"
                v-model="purchaseContractItem.scientificResearchProject"
                placeholder="请选择">
                <el-option label="是" value="yes"></el-option>
                <el-option label="否" value="no"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'是否为固定资产'" prop="fixedassets">
              <el-select
                style="width:100%"
                v-model="purchaseContractItem.fixedassets"
                placeholder="请选择">
                <el-option label="是" value="yes"></el-option>
                <el-option label="否" value="no"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('pur.currency')" prop="currency">
              <el-select 
                style="width:100%"
                v-model="purchaseContractItem.currency"  
                placeholder="请选择">
                <el-option 
                  v-for="item in currencyList"
                  :key="item.dictText"
                  :label="item.dictText" 
                  :value="item.dictKey+''">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'预计单价'" :rules="priceRules"  prop="hanshuidj">
              <el-input v-model="purchaseContractItem.hanshuidj"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'预计总价'" :rules="priceRules"  prop="amountMoney">
              <el-input v-model="allMoney"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="'申请原因'"  prop="reason">
              <el-input type="textarea" v-model="purchaseContractItem.reason"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm('purchaseContractItem')"
          :loading="submiting"
          class="loading-submiting"
        >保存</el-button>
      </div>
      <div slot="title" class="dialog-edit-head">
        <i>非合同编辑</i>
      </div>
    </el-dialog>
    <PurBasProjectList
      ref="PurBasProjectList"
      :projectDislogVisible="projectDislogVisible"
      @addProject="addProject"
      @closeProjectDislog="closeProjectDislog"
    >
    </PurBasProjectList>
  </div>
</template>
<script>
import * as Constant from '@/utils/constant'
import { ALERT } from '@/utils/responseHandle'
import { mapState, mapActions } from 'vuex'
import PurBasProjectList from './PurBasProjectList'
import Submiting from '@/mixins/Submiting'
import api_pur from '@/api/api_pur'
import sys_manage from '@/api/sys_manage'
export default {
  /**
   *  文件列表
   */
  name: 'PurProcessDemWithoutEdit',
  props: {
    fileListDislogVisible: {
      type: Boolean,
      default: false
    }
  },
  mixins: [Submiting],
  components: {PurBasProjectList},
  data () {
    return {
      isShow: this.fileListDislogVisible,
      purchaseContractItem: {
        id: null,
        itemType: 2, // 2为非合同审批流程新增的合同物项
        projectId: null,
        project: null,
        contractId: '',
        serialNumber: null,
        serviceName: null,
        specification: null,
        num: null,
        unit: null,
        requiredArrivalTime: null,
        currency: null,
        amountMoney: null,
        plannedCompletionTime: null,
        procInstId: 'xxxx',
        hanshuidj:null,
        scientificresearchproject:null,
        fixedassets:null,
        reason:null
      },
      rules: {
        project: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        serialNumber: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        num: [
          { type: 'number', message: '数量必须为数字值'}
        ],
        currency: [
          { required: true, message: '必填项', trigger: 'change' }
        ]
      },
      priceRules:[{ required: true, message: '必填,且必须是数字',trigger: 'blur'}],
      currencyList: [],
      whetherList:[{"yes":"是","no":"否"}],
      projectDislogVisible: false
    }
  },
  created () {
    this.sysDictLoadByPaging()
  },
  methods: {
    triggerOpen () { // 打开dislog
    },
    triggerClose () { // 关闭dislog
    },
    submitForm (formName) {
      this.openSubmiting()
      this.$refs[formName].validate((valid, error) => {
        if (valid) {
          api_pur.purContractItemSave([this.purchaseContractItem], result => {
            if (result.code === Constant.RT_SUCCESS) {
              ALERT.success(result.msg)
              this.$emit('addFileList',result.data[0])
            } else {
              // _this.$t('cm.tips')
              ALERT.error(result.msg)
            }
            this.closeSubmiting()
          })
        } else {
          this.closeSubmiting()
          return false
        }
      })
    },
    sysDictLoadByPaging () { // 获取系统应用分类
      sys_manage.sysDictLoadByPaging({dictGroupKey: 'run_currency'}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.currencyList = result.data
        } else {
          ALERT.error(result.msg)
        }
      })
    },
    showProject () {
      this.projectDislogVisible = true
    },
    closeProjectDislog () {
      this.projectDislogVisible = false
    },
    addProject (data) {
      this.purchaseContractItem.projectId = data.id
      this.purchaseContractItem.project = data.projectCode
      this.closeProjectDislog()
    }
  },
  watch: {
    fileListDislogVisible: {
      immediate: true,
      handler () {
        this.isShow = this.fileListDislogVisible
      }
    },
    isShow () {
      if (!this.isShow) {
        this.$emit('closeFileListDislog')
      } else {
      }
    }
  },
  computed: {
    ...mapState({
    }),
    allMoney() {


      var money = this.purchaseContractItem.hanshuidj * this.purchaseContractItem.num;
      //console.log("hahah",this.purchaseContractItem.hanshuidj+"+"+this.purchaseContractItem.num);
      return  this.purchaseContractItem.amountMoney=Number(money)

    }
  }
}
</script>
<style lang="scss">

</style>
